<!DOCTYPE html >
<html>
<head>
    <meta name="Generator" content="ECSHOP v2.7.3"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>${product.name}</title>  <link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon" />
    <meta name="Keywords" content=""/>
    <meta name="Description" content=""/>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link rel="stylesheet" type="text/css" href="/template/default/css/public.css"/>
    <link rel="stylesheet"  href="/template/default/css/flow.css">
    <link rel="stylesheet" type="text/css" href="/template/default/css/goods.css"/>
    <script type="text/javascript" src="https://static.9hive.cn/global/vendor/jquery/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/template/default/js/jquery.json.js"></script>
    <script type="text/javascript" src="/template/default/js/transport.js"></script>
    <script type="text/javascript" src="https://static.9hive.cn/global/vendor/touch/touchslider.dev.js"></script>
    <script type="text/javascript" src="/template/default/js/common.js"></script>

    <script type="text/javascript" src="/template/default/js/product.js"></script>
    <script type="text/javascript" src="/res/js/jquery.metadata.js"></script>
    <script type="text/javascript" src="/res/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="https://static.9hive.cn/global/vendor/layer/layer.js"></script>
    <script src="https://qzonestyle.gtimg.cn/open/qcloud/video/h5/h5connect.js" charset="utf-8"></script>

    <script type="text/javascript" src="/template/default/raty/jquery.raty.min.js"></script>

    <!--微信分享-->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
    <style>
        .color a {
            cursor:pointer
        }
    </style>
</head>
<body>
<div class="main main_top">

    <div class="tab_nav">
        <div class="header">
            <div class="h-left"><a class="sb-back" href="javascript:history.back(-1)" title="返回"><img src="/template/default/images/arrow_left_white.png"/></a></div>
            <div class="h-mid">
                <ul>
                    <li><a href="javascript:;" class="tab_head on" id="goods_ka1" onClick="setGoodsTab('goods_ka',1,3)">商品</a>
                    </li>
                    <li><a href="javascript:;" class="tab_head" id="goods_ka2" onClick="setGoodsTab('goods_ka',2,3)">详情</a>
                    </li>
                    <li><a href="javascript:;" class="tab_head" id="goods_ka3" onClick="setGoodsTab('goods_ka',3,3)">评价</a>
                    </li>

                </ul>
            </div>
            <div class="h-right">
                <aside class="top_bar">
                    <!--<div onClick="show_menu();$('#close_btn').addClass('hid');" id="show_more"><a-->
                            <!--href="javascript:;"></a></div>-->
                    <a href="/b/cartItem/list?shopId=${shopId}" class="show_cart"><em class="global-nav__nav-shop-cart-num" id="ECS_CARTINFO"> 0 </em></a>
                </aside>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="/template/default/js/mobile.js"></script>
    <div class="main" id="user_goods_ka_1" style="display:block;">
        <div class="banner">
            <div id="slider" class="slider">
                <ul id="sliderlist" class="sliderlist">
                    <%for(list in product.productImageList!){%>
                    <li style="float: left; display: block; width:100%;">
                        <span><a href="javacript:void(0)"><img title="" width="100%" src="${list.sourceProductImagePath}"></a></span>
                    </li>
                    <%}%>
                </ul>
                <div id="pagenavi" class="pagenavi">
                    <%for(list in product.productImageList!){%>
                    <a href="javascript:void(0);"></a>
                    <%}%>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var active = 0, as = document.getElementById('pagenavi').getElementsByTagName('a');
            for (var i = 0; i < as.length; i++) {
                (function () {
                    var j = i;
                    as[i].onclick = function () {
                        t2.slide(j);
                        return false;
                    }
                })();
            }
            var t2 = new TouchSlider({
                id: 'sliderlist', speed: 600, timeout: 6000, before: function (index) {
                    as[active].className = '';
                    active = index;
                    as[active].className = 'active';
                }
            });
        </script>
        <form action="javascript:addToCart(50)" method="post" id="purchase_form" name="ECS_FORMBUY">
            <div class="product_info">
                <div class="info_dottm border_black">
                    <div class="title-ys">
                        <div class="title" style="width: 100%;">
                            ${product.name}
                        </div>
                        <div class="fav likeItem">
                            <span class="like_button <%if(hasFavorite){%>on<%}%>" id="addFavorite">
                                <span class="icon_fav"></span>
                                <label id="collection"><%if(hasFavorite){%>已收藏<%}else{%>收藏<%}%></label>
                                <input type="hidden" class="productId" value="${product.id!}">
                            </span>
                        </div>
                    </div>
                    <dl class="goods_price">
                        <dt>
                            <span class="price_now">现价:</span>
                            <span id="ECS_GOODS_AMOUNT">${product.price,priceCurrencyFormat}</span>
                            <span class="price_old">原价:</span>
                            <strong>${product.marketPrice,priceCurrencyFormat} </strong>
                        </dt>
                        <script type="text/javascript" src="/template/default/js/lefttime.js"></script>
                    </dl>

                </div>


                <%if(paymentCount > product.basebuy){%>
                <ul class="price_dottm border_black">
                    <li>${evaluateList.~size}人评价</li>
                    <li>${paymentCount}人已付款</li>
                </ul>
                <%}%>
                <div class="price_dottm border_black product_sku">
                    <span class="base-sku">请选择商品规格或数量</span>
                </div>
            </div>

        </form>
    </div>
    <!--sku-->
    <div class="flick-menu-mask"></div>
    <div class="spec-menu">
        <div class="spec-menu-content spec-menu-show" style="display: block;">
            <div class="spec-menu-top bdr-b">
                <div class="spec-first-pic">
                    <%for(list in product.productImageList!){%>
                    <img title="" src="${list.sourceProductImagePath!}">
                    <%}%>
                </div>
                <a class="rt-close-btn-wrap spec-menu-close">
                    <p class="flick-menu-close tclck"></p>
                </a>
                <div id="specPlus" class="plus-price-wrap spec-plus-price-mtl" style="display: none">
                    <div class="plus-price-row">
                        <div class="spec-jd-price"><span class="plus-jd-price-title">京东价：</span> <span
                                class="price-icon grey"></span> <span class="plus-jd-price-text" id="specJdPrice"> 36.80 </span></div>
                    </div>
                    <div class="plus-price-row">
                        <div class="spec-plus-price"><span class="plus-member-price-title">会员价：</span> <span
                                class="price-icon black"></span> <span class="plus-member-price-text" id="specPlusPrice"></span> <img
                                class="plus-pri-icon" src=""></div>
                    </div>
                </div>
                <div class="spec-price" id="specJdPri" style="display: block">
                    <span class="yang-pic">￥</span>
                    <span id="spec_price"> ${product.price!} </span>
                </div>
                <div class="spec-sku"><span>库存:</span> <span>${product.store!0-product.freeStore!0}</span>件</div>
            </div>
            <div class="spec-menu-middle">
                <div class="prod-spec" id="prodSpecArea">
                    <!-- 已选 -->
                    <div class="spec-desc"><span class="part-note-msg">已选</span>
                        <div id="specDetailInfo_spec" class="base-txt">

                        </div>
                    </div>
                    <ul class="lists">
                        <!--<div class="nature-container" id="natureCotainer">
                            <div class="pro-color"> <span class="part-note-msg"> 颜色 </span>
                                <p id="color">
                                    <a title="白色 直袖款" class="a-item J_ping" report-eventparam="白色 直袖款">白色 直袖款</a> <a title="蓝色 直袖款" class="a-item J_ping selected" report-eventparam="蓝色 直袖款">蓝色 直袖款</a> <a title="黑色 直袖款" class="a-item J_ping" report-eventparam="黑色 直袖款">黑色 直袖款</a> <a title="灰色 直袖款" class="a-item J_ping" report-eventparam="灰色 直袖款">灰色 直袖款</a> <a title="粉色 直袖款" class="a-item J_ping" report-eventparam="粉色 直袖款">粉色 直袖款</a> <a title="紫色 直袖款" class="a-item J_ping" report-eventparam="紫色 直袖款">紫色 直袖款</a> </p>
                            </div>
                        </div>-->
                    </ul>

                    <div id="addCartNum" class="pro-count"><span class="part-note-msg" style="margin-right: 10px;">数量</span>
                        <div class="num">
                            <p class="jian"></p>
                            <input id="quantity" class="inputBorder" value="1" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')" type="text" maxlength="5">
                            <p class="jia"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flick-menu-btn spec-menu-btn">
                <a class="yellow-color add_cart addCartItem {id: '${product.id}',shopId:'${shopId}'}" id="add_cart_spec"
                   style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">加入购物车</a>
                <a class="red-color directorder" id="directorder_spec"
                   style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">立即购买</a>
            </div>
        </div>
    </div>


    <style>
        img {
            max-width: 100%;
        }
    </style>
    <div class="main" id="user_goods_ka_2" style="display:none;">
        <%if(isNotEmpty(product.videoFileId)){%>
        <div class="video_list">
            <div class="sp" id="sp">
                <div id="id_video_container_${product.videoFileId!}" style="width:100%; height:auto;"></div>
            </div>
        </div>
        <%}%>
        ${product.description!}
    </div>

    <div class="tab_attrs tab_item hide" id="user_goods_ka_3" style="display:none;">
        <script type="text/javascript" src="/template/default/js/utils.js"></script>
        <div id="ECS_COMMENT">
            <div class="comment_list" id="commentList">
                <ul>
                    <%if(evaluateList.~size<1){%>
                    <div class="score">暂无评价</div>
                    <%}else{%>
                        <% for(list in evaluateList){%>
                            <%if(list.isShowEvaluate){%>
                                <li class="comment_item">
                                    <div class="content_head">
                                        <div class="info">
                                            <div class=" comment_star">
                                                <div class="name" style="font-size: 13px">${list.member.username}[${list.member.memberRankValue.name!'未知'}]</div>
                                                <div class="two">${list.createDate,dateFormat="yyyy-MM-dd HH:mm:ss"}</div>
                                            </div>
                                        </div>
                                        <label style="margin-right:5px;color: #999;font-size: 14px">描述相符</label>
                                        <label class="score-callback-demo" data-score="${list.countStar!5}"></label>
                                        <p><span>评价：</span>${list.content}</p>
                                        <div class="figure clearfix">
                                            <%for(image in list.evaluateImageStore ){%>
                                                <%if(!isEmpty(image)){%>
                                                <a href="${image}">
                                                    <img class="img_click" id="" alt="" title="" style="width: 20%" src="${image}">
                                                </a>
                                                <%}%>
                                            <%}%>
                                        </div>
                                    </div>
                                </li>
                            <%}%>
                        <%}%>
                    <%}%>
                </ul>
            </div>
        </div>

    </div>

</div>
<section class="index_floor is_scroll" style="border: none">
    <h2><span></span>看了又看</h2>
    <div class="bd">
        <ul>
            <% for(list in categoryProduct){%>
            <li>
                <a href="/b/product/detailWap?id=${list.id}&shopId=${shopId!}">
                    <div class="products_kuang">
                        <img src="${list.productImageList[0].sourceProductImagePath!}">
                    </div>
                    <div class="goods_name">${list.name}</div>
                    <div class="price">
                        <p href="">${list.price,priceCurrencyFormat} </p>
                        <a class="car addCartItem {id: '${product.id}',shopId:'${shopId}'}">
                            <img src="/template/default/images/index_flow.png">
                        </a>
                    </div>
                </a>
            </li>
            <%}%>

        </ul>
    </div>
</section>
<!--<section class="index_floor is_scroll">
    <h2><span></span>买了又买</h2>
    <div class="bd">
        <ul>
            <% for(list in hotProduct){%>
            <li>
                <a href="/b/product/detailWap?id=${list.id}&shopId=${shopId!}">
                    <div class="products_kuang">
                        <img src="${list.productImageList[0].sourceProductImagePath!}"></div>
                    <div class="goods_name">${list.name}</div>
                    <div class="price">
                        <p href="goods.php?id=34">${list.price,priceCurrencyFormat} </p>
                        <a class="car addCartItem {id: '${product.id}',shopId:'${shopId}'}" href="javascript:void(0)">
                            <img src="/template/default/images/index_flow.png">
                        </a>
                    </div>
                </a>
            </li>
            <%}%>
        </ul>
    </div>
</section>-->

<div style=" height:60px;"></div>
<div class="footer_nav">
    <ul>
        <li class="bian"><a href="/${siteConfig.shopAlias!}/wap.html"><em class="goods_nav1"></em><span>首页</span></a>
        </li>
        <!--<li class="bian"><a href="tel:4000785268"><em class="goods_nav2"></em><span>客服</span></a> </li>-->
        <!--<li><a href="javascript:collect(50)" id="favorite_add"><em class="goods_nav3"></em><span>收藏</span></a></li>-->
        <li><a href="/b/customerCenter?shopId=${shopId!}" id="favorite_add"><em class="goods_nav3"></em><span>我的</span></a>
        </li>
    </ul>
    <dl>

        <dd class="flow"><a class="product_sku {id: '${product.id}',shopId:'${shopId}'}">加入购物车</a></dd>
        <dd class="goumai"><a style="display:block;" class="product_sku {id: '${product.id}',shopId:'${shopId}'}" href="javascript:void(0);">立即购买</a>
        </dd>
    </dl>
</div>

<!--客服-->
<div class="widget_wrap">
    <ul class="tools_widget_wrap">
        <li id="tools_kfli" class="">
            <a href="http://p.qiao.baidu.com/cps/chat?siteId=11355789&userId=24697079" class="tolls_widget_message"></a>
        </li>
        <li>
            <a href="javascript:;" id="tools_widget_goTop" class="tools_widget_goTop border"></a>
        </li>
    </ul>
</div>
</body>
<%if(isNotEmpty(product.videoFileId)){%>
    <script type="text/javascript">
        (function () {
        var option = {
            "auto_play": "1",
            "file_id": "${product.videoFileId!}",
            "app_id": "${product.videoAppId!}",
            "width": 640,
            "height": 480,
            "https": 1
        };
        /*调用播放器进行播放*/
        new qcVideo.Player("id_video_container_${product.videoFileId!}", option);
        })()
    </script>
<%}%>

<script type="text/javascript">
    $(function () {
        var cartQuantity = $.cookie("cartQuantity");
        if (!cartQuantity) {
            cartQuantity = 0;
        }
        $("#ECS_CARTINFO").html(cartQuantity);


        $.fn.raty.defaults.path = '/template/default/raty/img';
        $('.score-callback-demo').raty({
            score: function () {
                return $(this).attr('data-score');
            }
        });
    })
</script>
<script type="text/javascript">
    /*第一种形式 第二种形式 更换显示样式*/
    function setGoodsTab(name, cursel, n) {
        $('html,body').animate({'scrollTop': 0}, 600);
        for (i = 1; i <= n; i++) {
            var menu = document.getElementById(name + i);
            var con = document.getElementById("user_" + name + "_" + i);
            menu.className = i == cursel ? "on" : "";
            con.style.display = i == cursel ? "block" : "none";
        }
    }

    $(function () {
        //sku
        var skuValues = '${product.specificationvalues!}'
        $(".product_sku").click(function () {

            $(".flick-menu-mask").show();
            $(".spec-menu").addClass("modal-active");
            $("body").addClass("hidden");
            var specificationids = "${product.specificationids}";
            var result = '';
            if($(".lists").children().length>0){
                return false;
            }
            $.ajax({
                url: "/b/specification/getSku",
                type: 'GET',
                data: {
                    "specificationids": specificationids
                },
                success: function (r) {
                    if (r.state == 'ok') {//回调成功
                        //layer.msg("回调成功!");
                        //alert(r.info.length);
                        $("#specDetailInfo_spec").empty();
                        if (r.info.length > 0) {
                            $('.lists').empty();
                            //result+='';
                            $.each(r.info, function (k, v) {
                                $("#specDetailInfo_spec").append("<div class=\"base-sku\"></div>&nbsp;")
                                var specificationId = v.specificationId;
                                var specificationName = v.specificationName;
                                result += '<div class="nature-container" id="natureCotainer" specificationName="' + v.specificationName + '">';
                                result += '<div class="pro-color">';
                                result += '<span class="part-note-msg"> ' + specificationName + ' </span>';
                                result += '<p id="color" class="color">';
                                $.each(v.specificationValue, function (k0, v0) {
                                    var specificationValueId = v0.specificationValueId;
                                    var specificationValueName = v0.specificationValueName;
                                    if (skuValues && skuValues.indexOf(specificationValueId) >= 0) {
                                        result += '<a title="' + specificationValueName + '" class="a-item J_ping selected" specificationValueId="' + specificationValueId + '" report-eventparam="' + specificationValueName + '">' + specificationValueName + '</a>';
                                        var baseInfo = $("#specDetailInfo_spec").children(".base-sku");
                                        baseInfo.eq(k).text(specificationValueName);
                                    } else {
                                        result += '<a title="' + specificationValueName + '" class="a-item J_ping" specificationValueId="' + specificationValueId + '" report-eventparam="' + specificationValueName + '">' + specificationValueName + '</a>';
                                    }


                                });
                                result += '</p>';
                                result += '</div>';
                                result += '</div>';

                            });
                        }
                        $('.lists').append(result);
                        $("#specDetailInfo_spec").append("&nbsp;&nbsp;<span class=\"amount\">1</span>件");
                    } else
                        layer.msg("回调失败!");
                }
            });
        });

        $(".tclck").click(function () {
            $(".flick-menu-mask").hide();
            $(".spec-menu").removeClass("modal-active");
            $("body").removeClass("hidden")
        });

        $(".flick-menu-mask").click(function () {
            $(".flick-menu-mask").hide();
            $(".spec-menu").removeClass("modal-active");
            $("body").removeClass("hidden")
        });

        $('#quantity').bind('input propertychange', function () {
            $('.amount').html(this.value)
        }).bind('input input', function () {

        });

        //立即购买
        $(".directorder").click(function () {
            var specificationValueIds = "";
            $.each($(".nature-container"), function (k, v) {
                var select = $(this).children().children().find('.a-item.J_ping.selected');
                if (select.length >0) {
                    specificationValueIds += select.attr("specificationValueId") + ",";
                }
            });
            window.location.href='/b/order/singleInfo?shopId=${shopId!}&productId=${product.id}&type=ljgm&specificationValueIds='+specificationValueIds;
        });


        $(document).on("click", '.color a', function () {
            $_this = $(this);
            $_this.addClass('selected').siblings().removeClass('selected');
            //更新sku价格
            var specificationValueIds = "";
            var selections = $(".nature-container");
            if (selections.length > 0) {
                $.each($(".nature-container"), function (k, v) {
                    var select = $(this).children().children().find('.a-item.J_ping.selected');
                    if (select.length >0) {
                        specificationValueIds += select.attr("specificationValueId") + ",";
                    }
                });
                var index = $_this.parent().parent().parent().index();
                var baseInfo = $("#specDetailInfo_spec").children(".base-sku");
                var arrIds = specificationValueIds.split(",");
                if ((arrIds.length - 1)==selections.length) {
                    $.ajax({
                        url: "/b/specification/getSkuPrice",
                        data: {"specificationtype":"${product.specificationtype}","specificationValueIds": specificationValueIds},
                        dataType: "json",
                        success: function (data) {
                            if (data.state == "ok") {

                                if (data.num < 1) {
                                    $_this.removeClass('selected');
                                    baseInfo.eq(index).text("");
                                    layer.msg("当前商品无货");
                                    return;
                                }
                                baseInfo.eq(index).text($_this.text());
                                $("#spec_price").text(data.price);
                                $(".spec-sku").find("span").eq(1).text(data.num);
                            } else if (data.status == "error") {
                                layer.open({
                                    content: data.message
                                    , btn: '确定'
                                });
                            }
                        }
                    });
                } else {
                    baseInfo.eq(index).text($_this.text());
                }

            }
        });

        //加减面板
        $(function () {
            //加号
            $(".jia").click(function () {
                var $parent = $(this).parent(".num");
                var $num = window.Number($(".inputBorder", $parent).val());
                $(".inputBorder", $parent).val($num + 1);
                $(".amount").html($num + 1)
            });

            //减号
            $(".jian").click(function () {
                var $parent = $(this).parent(".num");
                var $num = window.Number($(".inputBorder", $parent).val());
                if ($num > 2) {
                    $(".inputBorder", $parent).val($num - 1);
                    $('.amount').html($num - 1)
                } else {
                    $(".inputBorder", $parent).val(1);
                    $('.amount').html($num)
                }
            });
        })

        //客服
        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop();
            scrollTop > 50 ? $("#tools_widget_goTop").addClass("view-top") : $("#tools_widget_goTop").removeClass("view-top");
        });

        $('#tools_widget_goTop').click(function (e) {
            e.preventDefault();
            $('html,body').animate({ scrollTop:0});
        });
    })
</script>
<script>
    $("#addFavorite").click(function () {
        var productId=$(".productId").val();
        $this = $(this);
        var like_button_on=$this.hasClass("on");
        if(like_button_on){
            console.log("取消收藏");
            $.ajax({
                url: "/b/favorite/deleteFavorite",
                type: 'GET',
                data:{
                    "productId": productId
                },
                success: function(data){
                    if (data.state == 'ok'){
                        layer.msg("取消收藏成功!");
                        $this.removeClass("on");
                        $("#collection").html("收藏");
                    }else{
                        layer.msg(data.info);
                    }
                }
            });

        }else{
            console.log("开始收藏");
            $.ajax({
                url: "/b/favorite/addFavorite",
                type: 'GET',
                data:{
                    "productId": productId
                },
                success: function(data){
                    if (data.state == 'ok'){
                        layer.msg("收藏成功!");
                        $this.addClass("on");
                        $("#collection").html("已收藏");
                    }else{
                        layer.msg(data.info);
                    }
                }
            });

            //alert("开始收藏");
        }

    });
</script>
<script type="text/javascript">
    wx.config({
        debug: false,
        appId : '${appId}',
        timestamp : '${timestamp}',
        nonceStr : '${nonceStr }',
        signature : '${signature}',
        jsApiList : [ 'onMenuShareTimeline', 'onMenuShareAppMessage',
            'onMenuShareQQ', ]
    });
    wx.ready(function() {
        /* 发送给朋友 */
        wx.onMenuShareAppMessage({
            title: '${product.name}',
            desc: '${product.name}',
            link: '${weburl}/b/product/detailWap?id=${product.id}&shopId=${shopId!}',
            imgUrl: '${shareImg!}',
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });
        /* 分享到朋友圈 */
        wx.onMenuShareTimeline({
            title: '${product.name}',
            link: '${weburl}/b/product/detailWap?id=${product.id}&shopId=${shopId!}',
            imgUrl: '${shareImg!}',
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });
        /* 分享到QQ */
        wx.onMenuShareQQ({
            title: '${product.name}',
            desc: '${product.name}',
            link: '${weburl}/b/product/detailWap?id=${product.id}&shopId=${shopId!}',
            imgUrl: '${shareImg!}',
            complete: function (res) {
                alert(JSON.stringify(res));
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });
        /*分享到微博*/
        wx.onMenuShareWeibo({
            title: '${product.name}',
            desc: '${product.name}',
            link: '${weburl}/b/product/detailWap?id=${product.id}&shopId=${shopId!}',
            imgUrl: '${shareImg!}',
            complete: function (res) {
                alert(JSON.stringify(res));
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });
    });
</script>
</html>